<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script>

$(function() {
	$("#datepicker").datepicker({
		dateFormat: 'yy-mm-dd',
		changeMonth : true,
		changeYear : true
	});
});
$(document).ready(
		function() {
			$('.slider').slider(
					{
						range : true,
						value : 0,
						min : 1,
						max : 100,
						slide : function(event, ui) {
							$("#slider-result").val(
									"$" + ui.values[0] + " - $"
											+ ui.values[1]);
						}
					});
			$("#slider-result").val(
					"$" + $("#slider-range").slider("values", 0) + " - $"
							+ $("#slider-range").slider("values", 1));
			$("#slider-result").val($(".slider").slider("value"));
		});

$(document).ready(function() { 
	$("#cart #two li, #cart #three li").draggable({
		appenTo: 'body',
		helper: 'clone'
	}).tooltip({
        show: {
          effect: "slideDown",
          delay: 250
        }
    });
	$( "#showping-contents .place" ).droppable({
	      activeClass: "ui-state-default",
	      hoverClass: "ui-state-hover",
	      accept: ":not(.ui-sortable-helper)",
	      drop: function( event, ui ) {
   		        $(this).find('.placeholder').remove();
   		        if(checkListItem(event, ui)) {
   		            $( "<li class='append' onclick='javascript:removeLi(this)'></li>").text( ui.draggable.text()).appendTo($(event.target));
   		        } 
   		        else {
   		  	        return;
   		        }
	      }
	    }).sortable({
	      items: "li:not(.placeholder)",
	      sort: function() {
	        // gets added unintentionally by droppable interacting with sortable
	        // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
	        $( this ).removeClass( "ui-state-default" );
	      }
	    });
});
var $append = [];
var msg = 'item';
var i = 1; 
var checkListItem = function (event, ui) {
	var text = ui.draggable.text();
    if(check(text)){
	   	$append.push(text);
	   	return true;
    }
    else {
    	return false;
    }
}
function check(text) {
	var bo = true;
	   for(var i =0; i < $append.length; i++){
		   
		   if($append[i] == text){
			   alert("목록에 있습니다");
			   bo = false;
			   return;
		   }
		   else {
			   console.log($append[i] + "     :      "  + text);
			   bo = true; 
		   }
	   }
	   return bo;
}
var removeLi = function (event) {
	
	   $( event ).remove();	
	   var result = $( event ).text();
 	   for(var i in $append){
		   if($append[i] == result) delete $append[i];
		  
	   }

/* 	   if(var index =($append.indexOf(result) == 1)) delete $append[index]; */
}

function exercisecalendarChange(pm) {
	 var date = $("#datepicker").val();
	 var array_data = date.split("-");  // split 함수사용..
	 var s_year = array_data[0];   // 잘라진 값 배열..
	 var s_month = array_data[1];
	 var s_day = array_data[2];
	 
	 if(pm == "up"){
		 s_day++;
	 } 
	 else if(pm == "down")
	 {
		 s_day--;
	 }
	 var exerciseScheduleStartdate = s_year+'-'+s_month+'-'+s_day;
	 $.ajax({
			url: 'schedule.spring',
			method:'post',
			data:{action:'mySports',exerciseScheduleStartdate:exerciseScheduleStartdate},
			success:function(html) {
				$(".parsingPage").html(html);
			},
			error:function(){
				alert("fail");	
			}

		});
}

</script>
<style type="text/css">
#showping-contents table tr th { width: 100px; background: white; }
#showping-contents table tr td { border-bottom: 1px solid #c6c9cc; display: inline-block; width: 100%; }
li.append { list-style: none; cursor: pointer; margin: 3px; }
.top { margin: 5px; }
.drag { font-size: 12px; font-family: '굴림', '나눔', 'Arial' }
.ui-tooltip,.arrow:after { background: black; border: 2px solid white; }
.ui-tooltip { padding: 10px 20px; color: white; border-radius: 20px; font: bold 14px "Helvetica Neue", Sans-Serif; text-transform: uppercase; box-shadow: 0 0 7px black; }
</style>

<div id="sports-information">
	<div>
		<div id="showping-caption" style="border: 1px solid #bfc5c5;">
			<span style="display: inline-block;"><a href="javascript:exercisecalendarChange('down')"><<</a><input
					type="text" name="exerciseScheduleStartdate" id="datepicker" value="${exerciseScheduleStartdate }" /><a href="javascript:exercisecalendarChange('up')">>></a></span>
		</div>
		<div id="showping-contents">
			<table id="insertNode">
				<col width="30%" /> <col width="70%" />
				<tr>
					<th>워밍업<input id="exerciseScheduleChoice" type="radio" checked="checked"
									name="exerciseScheduleChoice" value="W"></th>
					<td>
						<div id="1" class="place"
							style="overflow-x: hidden; overflow-y: auto; height: 91px; width: 100%; text-align: left;">
							<ol>
								<c:forEach var="exerciseSchedule" items="${exScheduleW }">
								<li class="placeholder" style="list-style: none; width: 100%; height: 100%;" onclick="">${exerciseSchedule.exerciseName }</li>
							</c:forEach>
							</ol>
						</div>
					</td>
				</tr>
				<tr>
					<th>상체운동<input id="exerciseScheduleChoice" type="radio"
									name="exerciseScheduleChoice" value="U"></th>
					<td>
						<div id="2" class="place" style="overflow-x: hidden; overflow-y: auto; height: 91px">
							<ol>
								<c:forEach var="exerciseSchedule" items="${exScheduleU }">
								<li class="placeholder" style="list-style: none; width: 100%; height: 100%;" onclick="">${exerciseSchedule.exerciseName }</li>
							</c:forEach>
							</ol>
						</div>
					</td>
				</tr>
				<tr>
					<th>복근운동<input id="exerciseScheduleChoice" type="radio"
									name="exerciseScheduleChoice" value="M"></th>
					<td>
						<div id="2" class="place" style="overflow-x: hidden; overflow-y: auto; height: 91px">
							<ol>
								<c:forEach var="exerciseSchedule" items="${exScheduleM }">
								<li class="placeholder" style="list-style: none; width: 100%; height: 100%;" onclick="">${exerciseSchedule.exerciseName }</li>
							</c:forEach>
							</ol>
						</div>
					</td>
				</tr>
				<tr>
					<th>하체운동<input id="exerciseScheduleChoice" type="radio"
									name="exerciseScheduleChoice" value="L"></th>
					<td>
						<div id="3" class="place" style="overflow-x: hidden; overflow-y: auto; height: 91px">
							<ol>
								<c:forEach var="exerciseSchedule" items="${exScheduleL }">
								<li class="placeholder" style="list-style: none; width: 100%; height: 100%;" onclick="">${exerciseSchedule.exerciseName }</li>
							</c:forEach>
							</ol>
						</div>
					</td>
				</tr>
				<tr>
					<th>유산소 운동<input id="exerciseScheduleChoice" type="radio"
									name="exerciseScheduleChoice" value="A"></th>
					<td>
						<div id="4" class="place"
							style="overflow-x: hidden; overflow-y: auto; height: 91px">
							<ol>
								<c:forEach var="exerciseSchedule" items="${exScheduleA }">
								<li class="placeholder" style="list-style: none; width: 100%; height: 100%;" onclick="">${exerciseSchedule.exerciseName }</li>
							</c:forEach>
							</ol>
						</div>
					</td>
				</tr>
			</table>
		</div>
	</div>
</div> <!-- sports-information -->
<div id="sports-information1">
	<div id="sports-addArea">
		<h2></h2>
		<div></div>
	</div>
	<div id="cart" style="height: 208px;">
		<dl>
			<dt class="sports-list-caption">목적</dt>
			<dd id="first">
				<ul>
					<li class="top"><a href=""><span>홈트레이닝</span></a></li>
					<li class="top"><a href=""><span>근력/헬스</span></a></li>
					<li class="top"><a href=""><span>유산소운동</span></a></li>
					<li class="top"><a href=""><span>요가</span></a></li>
					<li class="top"><a href=""><span>스트레칭</span></a></li>
				</ul>
			</dd>
		</dl>
		<dl>
			<dt class="sports-list-caption">운동부위</dt>
			<dd id="two">
				<ul>
					<c:forEach var="regio" items="${regioList }">
						<li class="sports-list"><a href="">
							<span class="drag" title="드래그를 하세요">${regio.exerciseRegio }</span>
							</a>
						</li>
					</c:forEach>
				</ul>
			</dd>
		</dl>
		<dl>
			<dt class="sports-list-caption">운동내용</dt>
			<dd id="three">
				<ul>

					<c:forEach var="exercise" items="${exerciseList }">
						<c:if test="${exercise.exerciseRemoveYn == 'N' }">
							<li class="sports-list">
								<a href="javascript:mySportsView(${exercise.exerciseNo });">
									<span class="drag" title="드래그를 하세요">${exercise.exerciseName}</span>
								</a>
							</li>
						</c:if>
					</c:forEach>
				</ul>
			</dd>
		</dl>
	</div>
	<div id="sports-div" style="height: 140px;">
		<div id="sports-div-image"></div>
		<div id="sports-div-text">
		<p></p>
		<p></p>
		</div>
	</div>
	<div style="margin: 0; width: 455px; height: 80px;">
		<label for="">시간</label> 
			<input type="text" id="ExScheduleTime" value=""> 
		<label for="">횟수</label>
			<input type="text" id="ExScheduleCnt" value="">
		<button type="button" style="float:right;" onclick="javascript:myExerciseAdd()">추가</button>
	</div>
	<div>
		<p>
			<span></span>님의 지난 운동달성 결과가 상체운동에 치우쳐 있습니다.
		</p>
		<p>
			균형잡힌 운동을 위해 하체운동 <span></span>를 추천합니다.
		</p>
	</div>
</div>      <!-- sports-information1 DIV END -->

<div></div>







